<template>
  <div class="app-container">
    <CurrentState :options="stateOption" :current="currentState"/>
    <Detail pageType="approval" />
    <div class="item_box">
      <p class="title_1">承保协议审核申请</p>
      <DetailForm
        :dataSources="insuringGgreementData"
        :columns="insuringGgreementColumns"
      >
        <template v-slot:ApplicationFileList>
          <span
            class="form_link_Btn"
            v-for="(_file, _index) in insuringGgreementData.ApplicationFileList"
            :key="_index + 'ApplicationFileList'"
            >{{ _file.name }}</span
          >
        </template>
      </DetailForm>
    </div>
    <div class="item_box">
        <p class="title_1">审批过程</p>
        <el-table class="mb10" :data="historyList" align="center">
          <el-table-column label="序号" type="index" width="80" align="center"/>
          <el-table-column label="流程环节" prop="taskName" align="center"/>
          <el-table-column label="处理人" prop="assigneeName" align="center"/>
          <el-table-column label="处理时间" prop="endDate" align="center"/>
          <el-table-column label="处理结果" prop="approveOperateText" align="center"/>
          <el-table-column label="处理意见" prop="comment" align="center"/>
          <el-table-column label="处理状态" prop="taskStatus" align="center"/>
          <el-table-column label="审批附件" prop="taskFile" align="center">
              <template #default="{row}">
                  <el-button link type="primary" @click="viewFile(row)">查看附件</el-button>
              </template>
          </el-table-column>
        </el-table>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="审批处理" prop="approvalStatus">
            <el-select v-model="formData.approvalStatus" style="width: 240px">
              <el-option
                v-for="dict in approvalStatusOption"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="审批意见" prop="approvalMsg">
            <el-input
              v-model="formData.approvalMsg"
              type="textarea"
              placeholder="请输入"
              maxlength="200"
              style="width: 60%"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="附件" prop="fileIds">
            <file-upload
              v-model="formData.fileIds"
              :fileType="['png', 'jpg', 'pdf']"
            ></file-upload>
          </el-form-item>
        </el-form>
      </div>
      <el-row justify="center">
        <el-button icon="Back" @click="cancel">取消领取</el-button>
        <el-button icon="Position" @click="submit" type="primary">提交</el-button>
      </el-row>
  </div>
</template>
  
<script setup>
import Detail from "./Detail.vue";
const router = useRouter()
const { proxy: vm } = getCurrentInstance()

// 当前状态
const stateOption = [{label: '草稿', value: 1}, {label: '立项审批', value: 2}, {label: '项目跟进', value: 3}, {label: '完成', value: 3}]
const currentState = ref(2)

const approvalStatusOption = [{label: '同意', value: '1'}, {label: '拒绝', value: '2'}]
const historyList = reactive([
  {
    taskName: "提交人新增项目",
    assigneeName: "王丽丽",
    endDate: "2024-12-22 15:15:15",
    approveOperateText: "",
    comment: "",
    taskStatus: "审批通过",
    taskFile: []
  },
  {
    taskName: "审批员审批项目",
    assigneeName: "王军",
    endDate: "2024-12-22 15:15:15",
    approveOperateText: "同意",
    comment: "可以，通过。",
    taskStatus: "审批通过",
    taskFile: []
  },
])
const formData = reactive({
    approvalStatus: '',
    approvalMsg: '',
    fileIds: []
})
const rules = {
    approvalStatus: [{ required: true, message: "请选择", trigger: "change" }],
    approvalMsg: [{ required: true, message: "请输入", trigger: "blur" }],
}
const formRef = ref(null)
const submit = ()=>{
    formRef.value.validate(valid => {
      if(!valid){
          return vm.$modal.notifyWarning("请完善表单信息");
      }
      vm.$modal.msgSuccess("处理成功");
      cancel()
    })
}
const cancel = ()=>{
  vm.$tab.closeOpenPage()
  router.back()
}
const viewFile = (row) => {
    console.log('row', toRaw(row))
}

// 承保协议审核申请
const insuringGgreementColumns = ref([
  { label: "申请类型", column: "applicationType", span: 8 },
  { label: "提出人", column: "applicant", span: 8 },
  { label: "提出日期", column: "applicationDate", span: 8 },
  { label: "描述", column: "applicationDesc", span: 24 },
  { label: "附件信息", column: "ApplicationFileList", slot: "ApplicationFileList", span: 24 },
]);
const insuringGgreementData = ref({
  applicationType: "投保合同",
  applicant: "张三",
  applicationDate: "2023-09-10",
  applicationDesc: "投保合同申请",
  ApplicationFileList: [
    { id: 1, name: "投保合同.pdf" },
    { id: 2, name: "投保合同.pdf" },
  ],
});
</script>

<style lang="scss" scoped>
.title_1 {
  margin: 10px;
  margin-left: 0;
}
</style>